import { memo, ReactElement } from "react";
import { Row, Col } from "antd";

import styles from "./index.module.scss";

import type { FC } from "react";
import GridViewItem from "../GridViewItem";
import type { IHotProduct, IProduct } from "@/services/modules/home";
export interface IProps {
  children?: ReactElement;
  productList?: IHotProduct[] | IProduct[];
}

const GridView4: FC<IProps> = memo(function (props) {
  const { children, productList = [] } = props;

  return (
    <>
      <div className={styles.container}>
        <Row>
          {productList.map((item, index) => {
            return (
              <Col key={item.id} span={6}>
                <GridViewItem
                  product={item}
                  showTips={index === 0}
                ></GridViewItem>
              </Col>
            );
          })}
        </Row>
      </div>
    </>
  );
});

export default GridView4;
GridView4.displayName = "GridView4";
